<template>
	<view class="app-login">
		<UniStatusBar bgc="transparent"></UniStatusBar>
		<view class="greeting">
			<view class="hello">Welcome</view>
			<view class="welcome">{{i18n.welcome_to}}</view>
		</view>
		<view class="content">
			<!-- <view class="login-title">
				<text class="outer-text" @tap="() => isPhone = true"> <text class="inner-text" :class="isPhone ? 'active': ''">{{i18n.phone_register}}</text> </text>
				<text class="outer-text" @tap="() => isPhone = false"> <text class="inner-text" :class="isPhone ? '': 'active'">{{i18n.email_register}}</text> </text>
			</view> -->
			<view class="li state" @tap="gotostate" v-if="isPhone">
				<view class="left">+ {{getIncode.code}}</text></view>
				<view class="center">{{getLang == 1? getIncode.zh : getIncode.en}}</view>
				<view class="right iconfont icon-arrow-right"></view>
			</view>
			<view class="li">
				<input type="text" :placeholder="i18n.enter_phone" v-model="phone">
				<text class="iconfont icon-cha" @tap="phone=''"></text>
			</view>
			<view class="li">
				<input type="text" :placeholder="i18n.enter_vcode" v-model="vcode">
				<view class="v-code"><Vcode :account="phone"></Vcode></view>
			</view>
			<view class="li">
				<input :type="showiconyanjing1 ? 'password' : 'text'" :placeholder="i18n.enter_login_pass" v-model="pass">
				<text class="iconfont" :class="showiconyanjing1 ? 'icon-yanjing1' : 'icon-yanjing2'" @tap="showiconyanjing1 = !showiconyanjing1"></text>
			</view>
			<view class="li">
				<input :type="showiconyanjing2 ? 'password' : 'text'" :placeholder="i18n.enter_login_pass_again" v-model="repass">
				<text class="iconfont" :class="showiconyanjing2 ? 'icon-yanjing1' : 'icon-yanjing2'" @tap="showiconyanjing2 = !showiconyanjing2"></text>
			</view>
			<view class="li">
				<input type="text" :placeholder="i18n.enter_invitation" v-model="invitation">
			</view>
			<!-- <view class="tip">8-20个字符包含数字、字母或者符号, 字母区分大小写</view> -->
			<view class="btn-wrapper"><Btn :txt="i18n.register" @tapbtn="doRegister"></Btn></view>
		</view>
		<view class="goLogin" @tap="goLogin">{{i18n.go_login}}</view>
	</view>
</template>

<script>
	import UniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	import Btn from '@/components/btn/btn2.vue'
	import Vcode from '@/components/vcode/vcode.vue'
	import {mapGetters, mapMutations} from 'vuex'
	import {pageto, showToast, fetch} from '@/common/js/util.js'
	export default {
		data() {
			return {
				phone: '',
				vcode: '',
				pass: '',
				repass: '',
				invitation: '',
				showiconyanjing1: true,
				showiconyanjing2: true,
				isPhone: true,
			}
		},
		computed: {
			email_tip() {
				return this.isPhone ? this.i18n.enter_phone : this.i18n.enter_email
			},
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLang',
				'getIncode'
			])
		},
		methods: {
			doRegister() {
				if(!this.phone) {
					showToast(this.i18n.enter_phone)
					return
				}
				if(!this.vcode) {
					showToast(this.i18n.enter_yzm)
					return
				}
				if (!this.pass) {
					showToast(this.i18n.enter_login_pass)
					return
				}
				if (!this.repass) {
					showToast(this.i18n.enter_input_pass_again)
					return
				}
				if (this.pass != this.repass) {
					showToast(this.i18n.login_pass_inconsistent)
					return
				}
				uni.showLoading()
				let _data = {
					email: this.phone,
					password: this.pass,
					yzm: this.vcode,
					refer: this.invitation,
					lang_type: this.getLang,
					type: this.isPhone ? 2 : 1,
					code: this.isPhone ? this.getIncode.code : '',
					password1: this.repass,
					nickname: '',
				}
				// console.log(_data)
				fetch(this.getRequestUrl + '/api/login/register', _data, "post")
					.then(res => {
						console.log(res)
						uni.hideLoading()
						if (res.statusCode == 200 && res.data.code == 1) {
							this.setLogin({
								username: this.phone,
								password: this.pass
							})
							setTimeout(() => {
								pageto('/pages/new-login/new-login')
							}, 1500)
						}
						showToast(res.data.msg)
					})
					.catch(err => {
						uni.hideLoading()
						console.log(err)
					})
			},
			goLogin() {
				pageto('/pages/new-login/new-login')
			},
			gotostate() {
				pageto('./state')
			},
			...mapMutations([
				'setLogin'
			])
		},
		components: {
			UniNavBar,
			UniStatusBar,
			Btn,
			Vcode
		},
		watch: {
			isPhone(newv) {
				
			}
		}
	}
</script>

<style lang="scss">
@import '@/common/scss/variable.scss';
@import '@/common/scss/global.scss';
.app-login {
	.greeting {
		color: $black;
		margin-left: 30upx;
		margin-top: 20upx;
		font-weight: bold;
		.hello {
			font-size: 30px;
			margin-bottom: 16upx;
		}
		.welcome {
			font-size: 15px;
		}
	}
	.content {
		width: 690upx;
		margin-left: 30upx;
		margin-top: 60upx;
		border-radius: 16upx;
		background-color: $white;
		padding: 0 30upx;
		box-shadow: 0 5px 2px 0px $white;
		.login-title {
			font-size: 14px;
			color: $split-line-color1;
			text-align: center;
			// padding: 40upx 0 20upx;
			display: flex;
			flex-direction: row;
			.outer-text {
				flex: 1;
				display: inline-block;
				height: 70upx;
				line-height: 70upx;
				margin-top: 20upx;
				.inner-text {
					display: inline-block;
					width: 100%;
					&.active {
						font-size: 15px;
						font-weight: bold;
						color: $theme-color;
					}
				}
				&:last-child {
					.inner-text{
						border-left: 1upx solid $adorn-green;
					}
				}
			}
		}
		.li.state {
			height: 84upx;
			// border-bottom: 1upx solid $split-line-color2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: $text-gray-color4;
			font-size: 14px;
			padding-left: 40upx;
			margin-top: 10upx;
			.left {
				height: 100%;
				line-height: 84upx;
				margin-right: 30upx;
				margin-left: 10upx;
			}
			.center {
				flex: 1;
				margin-left: 10px;
			}
			.right {
				width: 100upx;
				text-align: right;
				height: 100%;
				line-height: 80upx;
			}
		}
		.li {
			height: 84upx;
			// border-bottom: 1upx solid $split-line-color2;
			background-color: #EDEDED;
			border-radius: 110upx;
			position: relative;
			z-index: 1;
			padding-left: 40upx;
			input {
				height: 84upx;
				font-size: 12px;
				color: $text-gray-color4;
			}
			.v-code {
				position: absolute;
				right: 40upx;
				top: 0;
				height: 84upx;
				color: $theme-color;
				font-weight: bold;
				line-height: 84upx;
				font-size: 13px;
				padding: 0 10upx;
				width: 100px;
				text-align: right;
				z-index: 10;
			}
			.iconfont {
				position: absolute;
				right: 40upx;
				top: 0;
				width: 80upx;
				height: 84upx;
				line-height: 84upx;
				z-index: 5;
				text-align: right;
				color: $theme-color;
			}
			&+.li {
				margin-top: 30upx;
			}
		}
		.btn-wrapper {
			margin-top: 50upx;
		}
		.tip {
			font-size: 11px;
			color: $text-gray-color3;
			margin-bottom: 80upx;
			margin-top: 26upx;
		}
	}
	.goLogin {
		width: 690upx;
		height: 86upx;
		color: #1D7DFF;
		line-height: 86upx;
		text-align: center;
		font-size: 13px;
		margin-left: 30upx;
	}
}
</style>

